<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bootstrap 实例 - 边框表格</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div>
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal-2">增加</button>
    <div class="search">
      <label>名称：</label><input id="searchInput-1" placeholder="请输入" style=" width: 151px; height: 32px;" type="text" />
      <label>城市：</label><input id="searchInput-2" placeholder="请输入" style=" width: 151px; height: 32px;" type="text" />
      <button type="button" class=" search-btn btn btn-primary">搜索</button>
      <button type="button" class="reset-btn btn btn-default">重置</button>
    </div>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
      </tbody>
    </table>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              是否删除
            </h4>
          </div>
          <div class="modal-body">
            确定删除
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default close1" data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary remove">
              确定
            </button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="myModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">修改</h4>
          </div>
          <div class="modal-body">
            <div class="input-group1">
              <label>名称：</label><input type="text" class="form-control" name="" id="name-1" placeholder="请输入">
            </div>
            <div class="input-group1">
              <label>城市：</label><input type="text" class="form-control" name="" id="city-1" placeholder="请输入">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type=" button" class="btn sure-btn-1 btn-primary">确认修改</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="myModal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">新增</h4>
          </div>
          <div class="modal-body">
            <div class="input-group1">
              <label>名称：</label><input type="text" class="input-1 form-control" name="" id="name" placeholder="请输入">
            </div>
            <div class="input-group1">
              <label>城市：</label><input type="text" class="input-1 form-control" name="" id="city" placeholder="请输入">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="sure-btn-2 btn btn-primary">确认</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <script>
      const data = [
        { id: 1, name: "李四", city: "重庆" },
        { id: 2, name: "张三", city: "成都" },
        { id: 3, name: "张一", city: "北京" },
        { id: 4, name: "张二", city: "上海" },
        { id: 5, name: "王五", city: "厦门" },
        { id: 2, name: "李峰", city: "成都" },
        { id: 2, name: "李明", city: "石家庄" },
      ];
      //   渲染
      function tableTbody(data) {
        $("tbody").empty();
        for (let i = 0; i < data.length; i++) {
          $("tbody").append(`
      <tr>
        
          <td>${data[i].name}</td>
          <td>${data[i].city}</td>
          <td>
            <button data-id='${data[i].id}' type="button" class="btn btn-danger delete-btn" data-toggle="modal" data-target="#myModal">删除</button>
            <button data-id='${data[i].id}' type="button" class="btn btn-warning alter-btn confirm" data-toggle="modal" data-target="#myModal-1">修改</button>
          </td>
      </tr>
      `)
        }
      }
      tableTbody(data)
      //删除
      $("tbody").on("click", ".delete-btn", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"))
        $(".remove").on("click", function () {
          for (let i = 0; i < data.length; i++) {
            if (dataId === data[i].id) {
              data.splice(i, 1)

            }
          }
          tableTbody(data)
          $('#myModal').modal('hide')
        })
      })
      // 修改
      $("tbody").on("click", ".alter-btn", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"))
        for (let i = 0; i < data.length; i++) {
          if (dataId === data[i].id) {
            $("#name-1").val(`${data[i].name}`)
            $("#city-1").val(`${data[i].city}`)
          }
        }
        $(".sure-btn-1").on("click", function () {
          for (let i = 0; i < data.length; i++) {
            if (dataId === data[i].id) {
              data[i].name = $("#name-1").val()
              data[i].city = $("#city-1").val()
            }
          }
          tableTbody(data)
          $('#myModal-1').modal('hide')
        })
      })
      // 添加
      $(".sure-btn-2").on("click", function () {

        let newName = $("#name").val()
        let newCity = $("#city").val()
        let newArr = {
          id: data.length + 1,
          name: newName,
          city: newCity,
        }
        if (newName === "" && newCity === "") {
          tableTbody(data)
          return
        } else {
          data.push(newArr)
          tableTbody(data)
        }
        $('#myModal-2').modal('hide')
        $(".input-1").val("")

      })
      // 搜索
      $(".search-btn").on("click", function () {
        let value1 = $("#searchInput-1").val()
        let value2 = $("#searchInput-2").val()

        if (!value2 && !value1) {
          tableTbody(data)
          return
        }
        let searchArr = []
        for (let i = 0; i < data.length; i++) {
          if (data[i].name.includes(value1) && data[i].city.includes(value2)) {
            searchArr.push(data[i])

          }

        }
        tableTbody(searchArr)
      })
      $(".reset-btn").on("click", function () {
        $("#searchInput-1").val("")
        $("#searchInput-2").val("")
        tableTbody(data)
      })
    </script>
</body>

</html>